<template>
	<view class="friendPermissions">
		<comHead :title="$t('grzx.hyqx')" :isLeft="true" :isRight="false"></comHead>
		<view class="list">
			<view class="item nth1">
				<view class="l">
					<text>{{$t('grzx.jwhysxyz')}}</text>
				</view>
				<view class="r">
					<switch checked="true" color=" #0f9dfe" style="transform:scale(0.7)" />
				</view>
			</view>
			<view class="item">
				<radio-group @change="radioChange">
					<label>
						<text>{{$t('grzx.yxbfrjwwhy')}}</text>
						<radio :checked="active === '1'" :value="'1'" />
						<image :src="changeImage(1)" mode=""></image>
					</label>
					<view class="ms" v-if="active==1">
						<text>{{$t('grzx.yxVIP')}}</text>
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="vip">
								<text>{{array[index]}}</text>
								<image src="https://siha.vxmeng.com/static/my/down.png" mode="widthFix"></image>
							</view>
						</picker>
						<picker @change="bindPickerChange1" :value="index1" :range="array1">
							<view class="vip" style="margin-left: 0;">
								<text>{{array1[index1]}}</text>
								<image src="https://siha.vxmeng.com/static/my/down.png" mode="widthFix"></image>
							</view>
						</picker>
						<text>{{$t('grzx.tjwwhy')}}</text>
					</view>
					<label>
						<text>{{$t('grzx.yxrhrjwwhy')}}</text>
						<radio :checked="active === '2'" :value="'2'" />
						<image :src="changeImage(2)" mode=""></image>
					</label>
					<label>
						<text>{{$t('grzx.byxrhrjwwhy')}}</text>
						<radio :checked="active === '3'" :value="'3'" />
						<image :src="changeImage(3)" mode=""></image>
					</label>
				</radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: '2',
				array: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'].map(item => item+this.$t('grzx.ji')),
				index: 0,
				array1: [this.$t('grzx.ys'), this.$t('grzx.yx')],
				index1: 0
			}
		},
		methods: {
			radioChange(evt) {
				console.log(evt)
				this.active = evt.detail.value
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			bindPickerChange1: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index1 = e.detail.value
			},
			changeImage(n) {
				if (n == this.active) {
					return 'https://siha.vxmeng.com/static/my/selected.png';
				} else {
					return 'https://siha.vxmeng.com/static/my/no-selected.png';
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.friendPermissions {
		height: 100vh;


		.list {
			// padding: 30rpx;
			box-sizing: border-box;
			width: 690rpx;
			margin: 0 auto;
			// background: linear-gradient(to right bottom, rgba(28, 25, 28), rgba(18, 18, 30));
	    background: linear-gradient(128deg, rgba(34, 34, 34, 0.3) 0%, rgba(30, 36, 44, 0.35) 102%);

			.item {
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.l {
					display: flex;
					flex-direction: column;

					text {
						color: #fff;
						font-size: 32rpx;

						&:nth-child(2) {
							color: rgba(#fff, 0.5);
							font-size: 24rpx;
							margin-top: 20rpx;
						}
					}
				}

				.r {
					switch {
						transform: scale(0.7);
						transform-origin: 100% 50%;
					}
				}

				.ms {
					color: #D8D8D8;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					width: 100%;
					justify-content: center;
					padding: 20rpx 0;

					.vip {
						padding: 5rpx 20rpx;
						border-radius: 10rpx;
						background: linear-gradient(125deg, #222222 0%, rgba(30, 36, 44, 0.65) 102%);
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 0 20rpx;

						image {
							width: 20rpx;
							margin-left: 10rpx;
						}
					}
				}

				radio-group {
					display: flex;
					flex-direction: column;
					width: 100%;

					/deep/uni-radio .uni-radio-input {
						width: 40rpx;
						height: 40rpx;
						background: none !important;
					}

					label {
						padding: 30rpx 0;
						border-top: 1rpx solid rgba(#FFFFFF, 0.1);
						display: flex;
						align-items: center;
						justify-content: space-between;
						position: relative;

						text {
							color: #fff;
							font-size: 30rpx;
						}

						image {
							position: absolute;
							width: 32rpx;
							height: 32rpx;
							right: 20rpx;
							top: 28rpx;
						}

						radio {
							visibility: hidden;
						}
					}
				}
			}

			.nth1 {
				padding: 30rpx;
			}
		}
	}
</style>